<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2-07 直线路径path</title>
</head>
<body>
  <svg width="300" height="300">
    <!--
      M: 起点（moveto）
      L: 点（lineto）
      l: 点，相对位置
      H: 和上一个点Y相等（horizontal lineto），方便水平操作
      h: 和上一个点Y相等，但X的位移是相对
      V: 和上一个点X相等（vertical lineto），方便垂直操作
      v: 和上一个点X相等，但Y的位移是相对
      Z: 关闭当前路径（closepath）
    -->
    <!-- <path
      d="M 10 10 L 200 10 L 200 180 L 10 10 Z"
      stroke="pink"
      stroke-width="10"
      fill="none"
    /> -->

    <!-- <path
      d="M 10 10 H 200 V 180 L 10 10 Z"
      stroke="pink"
      stroke-width="10"
      fill="none"
    /> -->

    <!-- L 是可以省略的 -->
    <path
      d="M 10 10 L 200 10 200 180 10 10 Z"
      stroke="pink"
      stroke-width="10"
      fill="none"
    />


    <!--
      路径指令注意大小写
      大写字母：绝对定位
      小写字母：相对定位

      绝对定位：写什么位置就是什么位置
      相对定位：相对上一次的位置，在上一次位置基础上调整
    -->
    <!-- <path
      d="M 50 50 L 100 100"
      stroke="red"
    /> -->
    <!-- <path
      d="M 50 50 l 100 100"
      stroke="red"
    /> -->
  </svg>
</body>
</html>